<template>
  <div class="test">
    sonson
    <br />
    <button class="aaa" @click="btnClick1">increment</button>
    <button class="aaa" @click="btnClick2">decrement</button>
    <button class="aaa" @click="btnClick3">add</button>
    <button class="aaa" @click="btnClick4">爷爷addprops</button>
    <button class="aaa" @click="btnClick5">爷爷addemit</button>
    <button class="aaa" @click="btnClick6">爷爷主动触发</button>
    <el-input :value="value" @input="input" />
    <hr>
    <SonSonSon></SonSonSon>
  </div>
</template>

<script>
import SonSonSon from "./SonSonSon";
export default {
  components: { SonSonSon },
  model: {
    prop: "value",
    event: "inputChange",
  },
  props: ["addClick", "value"],
  setup(props, { emit, listeners }) {
    const input = (e) => {
      console.log(e);
      emit("inputChange", e);
    };
    console.log(listeners);
    const btnClick1 = () => emit("increment");
    const btnClick2 = () => emit("decrement");
    const btnClick3 = () => emit("add");
    const btnClick4 = () => props.addClick();
    const btnClick5 = () => emit("addClick");
    const btnClick6 = () => listeners.addClick();
    return {
      btnClick1,
      btnClick2,
      btnClick3,
      btnClick4,
      btnClick5,
      btnClick6,
      input,
    };
  },
};
</script>

<style scoped lang="less">
.aaa {
  padding: 5px 10px;
  &:nth-child(odd) {
    background-color: aqua;
  }
}
.aaa + .aaa {
  margin-left: 10px;
}
</style>
